<template>
    <div id="singalBox">
        <!-- 
        
        也就是@submit.prevent这种方式既能阻止表单的发送,又能设置相关的逻辑
        -->

        <form action="https://search.jd.com/Search" class="mainForm">
            <ul class="disorder">
                <!-- 
                列表属于块级标签，会自动换行
                -->
                <label>
                    <li class="innerList list1">
                        <input type="text" placeholder="请输入你的姓名:" name="name" v-model="name">
                    </li>
                </label>
                <label>
                    <li class="innerList list2">
                        <input type="password" placeholder="请输入你的密码:" name="password" v-model="password">
                    </li>
                </label>
                <label>
                    <!-- 
                    记住一点v-bind绑函数,简写为:属性,
                    总结:
                    绑函数有两种情况:
                    1、@+属性名="数据模型中所定义的函数名字"
                    2、v-bind:属性名="[数据模型中的函数名字]",此法可以简写为:属性名="[数据模型中的函数名字]"
                    这里另外还说明一点,当函数没有参数的时候，再用这两种方法去绑定一个函数的话是可以不写那个括号的
                    -->
                    <li class="innerList list5"><input type="text" placeholder="请输入你的职业:" name="profess" v-model="profess"></li>
                </label>
                <label>
                    <li class="innerList list3">
                        <input type="text" placeholder="请你输入你的学历:" name="educationGrade" v-model="educationGrade">
                    </li>
                </label>
                <label>
                    <li class="innerList list4">
                        <el-button @click="submit" class="keyword keyword1">注册</el-button>
                        <el-button @click="reset" class="keyword keyword2">重置</el-button>
                    </li>
                </label>
            </ul>
        </form>
    </div>
</template>


<script>
import { ElMessage } from 'element-plus'



//给页面增加一个页面加载后的监视器，即保证再执行这些代码时，这些相关的元素是存在的,否则就会出现明明有元素但是加载不出来,就对其进行访问的情况
window.onload=function(){
    var div = document.getElementById('singalBox')
        div.style.width = innerWidth
        div.style.height = innerHeight
        var list1 = document.getElementsByClassName('list1')[0]
        list1.style.paddingTop = 0.33 * innerHeight + 'px'
        var list4 = document.getElementsByClassName('list4')[0]
        list4.style.paddingBottom = 0.33 * innerHeight + 'px' 
}
export default{
    data(){
        return{
            // 姓名
            name:"",
            // 密码
            password:"",
            // 职业
            profess:"",
            // 学历
            educationGrade:"",
            // 总共的变量,即向后端服务器所需要的携带在请求体中的parameter
            total:{
                name:this.name,
                password:this.password,
                educationGrade:this.educationGrade,
                profess:this.profess
            }
        }
    },
    methods:{
        reset:function(){
            this.name=''
            this.password=''
            this.profess=''
            this.educationGrade=''
            ElMessage(
                {
                    message:"重置成功!",
                    type:"success",
                    plain:true
                }
            )
        },
        submit:function(){
            var name=this.name
            var pwd=this.password
            // 还是要在数据提交之前，将所携带的请求体参数，重新修改
            this.total.name=name
            this.total.password=this.password
            this.total.profess=this.profess
            // 逻辑判断规则
            var is=name.length>10||pwd.length>10||!(this.educationGrade in {"本科生":0,"研究生":0,"专科生":0})
            if(is){
                ElMessage(
                    {
                        message:"你的输入信息有误!",
                        type:"warning",
                        plain:true
                    }
                )
                return 
            }
            var di={
                "本科生":'undergraduate',
                "研究生":"postgraduate",
                "专科生":"professor"
            }
            this.total.educationGrade=di[this.educationGrade]
            // axios的相关概念,简单来说，本质上就是暗自发请求(即用户不用自动去请求网址,而用户只需要请求其中的一个网页，里面若有异步请求,则会有axios
            //自动帮我们发 
        // 以下说下axios的异步请求使用顺序
        /*
            1、需要先在main.js文件中声明一个全局对象
            2、利用在main.js所声明的全局对象,可以在每一个.vue文件使用this+'.'的方式去调用
            3、请求方式分为这几种get,post,delete,option,put,等方式，不过中最常用的还是get,post
        */
            this.$axios.post('http://localhost:520/enroll',this.total).then(
                (data)=>{
                    // console.log(data);
                    var data1=data.data.data
                    if(data1=="successful"){
                        ElMessage(
                            {
                                message:"注册成功!",
                                type:"success",
                                plain:true
                            }
                        )
                    }else{
                        ElMessage(
                            {
                                message:"注册失败!,请重新注册!",
                                type:"error",
                                plain:true
                            }
                        )
                    }
                }
            ).catch(
                ()=>{
                    ElMessage(
                        {
                            message:"请求失败!",
                            type:"error",
                            plain:true
                        }
                    )
                }
            )
        }
    }
}
</script>

<style>
 *{
            margin:0;
            padding: 0;
            border: 0;
            list-style: none;
        }
        #singalBox{
            background-color:skyblue;
            /* 
            overflow就是为了解决，子元素的margin-top属性不被父元素的抢走
            */
            overflow: hidden;
        }
        /* 
        
        因为input默认的展示模式为行内元素，而并非块元素，因此的它margin是不会一生效的，
        总结:
        1、行内元素是不会生效margin的top-bottom,而又因为margin的复合属性第一组值就是top-bottom，因此就不会生效,所以位于后面的left-right
        也就不会生效
        */
        /*
            总结:
            无序列表中的li标签默认都是一个块元素
        */
        .list1{
            list-style-image: url('../../images/icon1.png');
        }
        .list2,.list3,.list5{
            list-style-image: url('../../images/icon2.png');
        }
        /* 
        这里面还有个注意的细节:
        就是form,ul,ol这样标签实际上是没有盒子的相关属性的，他们唯一存在的意义就是提供结构，是层次更加一目了然
        因此,li标签的父亲其实就是div，所以由于继承关系div就获取了li标签的margin-top属性值，而这个属性值就会造成margin塌陷,解决办法就是
        在父元素那里加上一个属性就是overflow属性，这样就能就能解决，这种办法是最好的
        */
        li{
            margin:20px ;
            /* 
            对于li标签而言input输入框相当于是文本元素
            */
            text-align: center;
            /* 
            此属性用来控制列表项是否安置在与文本内容相同的地方
            */
            list-style-position: inside;
        }
        /* input{
            border:1px solid black;
            padding: 5px;
        } */
        .keyword{
            width: 50px;
            height: 50px;
            /* border-radius: 50%; */
        }
        .keyword1{
            color:green;
            text-shadow: 1px 2px 2px skyblue;
            margin-right: 40px;
        }
        .keyword2{
            color:red;
            text-shadow: 1px 2px 2px yellow;
        }
</style>